<template>
  <div>
    <van-sticky>
      <div class="navbar">
      <div class="navleft" @click="goToCity">
          {{$store.state.cityName}}<van-icon name="arrow-down" size="0.5" color="#6e6f6f" />
        </div>
        <div class="nav-title">影院</div>
        <div class="nav-right">
          <van-icon name="search" size="23" color="#6e6f6f" @click="$router.push('/cinema/search')"/>
        </div>
      </div>
    </van-sticky>

    <div class="cinemalist">
      <ul>
        <li v-for="item in cinemalist" :key="item.cinemaId" @click="toCinemaDetail(item.cinemaId)">
          <div class="cinema-lf">
            <div class="cinema-name">{{ item.name }}</div>
            <div class="cinema-address">{{ item.address }}</div>
          </div>
          <div class="cinema-rt">
            <div class="money">
              <span class="moneylf">￥{{ item.lowPrice / 100.0 }}</span>
              <span class="moneyrt">起</span>
            </div>
            <div class="address">距离未知</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from "../request/http";
export default {
  name: "Cinema",
  data() {
    return {
      cinemalist: []
    };
  },
  mounted() {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=7845835`,
      headers: {
        "X-Host": "mall.film-ticket.cinema.list"
      }
    }).then(res => {
      if (res.status == 0) {
        this.cinemalist = res.data.cinemas;
      }
    });
  },
  methods:{
      goToCity(){
          this.$router.push('/city')
      },
      toCinemaDetail(id){
        this.$router.push('/cinemadetail/'+id)
      }
  }
};
</script>
<style scoped>
.navbar {
  height: 44px;
  line-height: 44px;
  background: #fff;
  border-bottom: 1px solid #ededed;
  display: flex;
  justify-content: space-between;
}
.navleft {
  display: 30%;
  padding-left: .2rem;
}
.nav-title {
  display: 1;
  color: #191a1b;
  font-size: 17px;
}
.nav-right {
  display: 30%;
  padding-right: 20px;
  position: relative;
  overflow: hidden;
}
.nav-right .van-icon {
  margin-top: 9px;
}

.cinemalist {
  padding-bottom: 50px;
}
.cinemalist li {
  position: relative;
  background-color: #fff;
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #ededed;
}
.cinema-lf {
  width: calc(100% - 65px);
  text-align: left;
  padding-right: .15rem;
  box-sizing: border-box;
}
.cinema-name {
  color: #191a1b;
  font-size: 18px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-address {
  color: #797d82;
  font-size: 12px;
  margin-top: 10px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-rt {
  width:70px;
  text-align: center;
  float: right;
  margin-right: -5px;
  box-sizing: border-box;
}
.moneylf {
  font-size: 15px;
  text-align: center;
  color: #ff5f16;
  height: 0!important;
  display: inline-table!important;
}
.moneyrt {
  color: #ff5f16;
  font-size: .10rem;
  text-align: center;
}
.address {
  font-size: .11rem;
  color: #797d82;
  margin-top: 10px;
}
</style>
